<template>
    <div class="playlist">
        <mt-button icon="back" slot="left" @click="goBack()"></mt-button>
        <!-- 头部信息 -->
        <div class="list_header">
            <div class="lheader_bg" :style="{backgroundImage:'url(' + playlist.coverImgUrl + ')'}"></div>
            <div class="lheader_info clearfix">
                <div class="header_fl">
                    <img :src="playlist.coverImgUrl" alt="">
                    <span><i class="iconfont icon-erji"></i> {{playCounts(playlist.playCount)}}</span>
                </div>
                <div class="header_fr">
                    <h2>{{playlist.name}}</h2>
                    <div class="header_user">
                        <a>
                            <div class="header_user_pic"><img :src="uPic" alt=""></div>{{uName}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 歌单描述 -->
        <div class="list_dec">
            <div class="dec_tag">
                标签：
                <span v-for="(tag,i) in playlist.tags">{{tag}}</span>
            </div>
            <div class="dec_info">
                <div class="dec_con" :class="{'dec_info_thide3': icondown}">简介：{{playlist.description}}</div>
                <i class="iconshow iconfont" @click="showInfo()" :class="{'icon-jiankuohaoxixia':icondown,'icon-jiankuohao-xi-shang':!icondown}"></i>
            </div>
        </div>
        <!-- 歌曲列表-->
        <div class="list_songs">
            <h3 class="listTitle">歌曲列表</h3>
            <ul class="rankUl">
                <li class="rankLi" v-for="(item,index) in playlistSongs" :key="index" @click="toPlayer(item.id,allSong,index)">
                    <div class="song_index">{{index+1}}</div>
                    <div class="songs">
                        <div class="song_name">{{item.name}}</div>
                        <div class="song_dec" >
                            <a v-for="(a,i) in item.ar" :key="i" @click="toSinger(a.id)">{{a.name}} </a>
                             -
                            <a>{{item.al.name}}</a>
                        </div>
                        <div class="song_playBtn">
                            <i class="iconfont icon-bofang"></i>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
        <!-- 精彩评论列表 -->
        <div class="hotCom">
            <h3 class="listTitle">精彩评论</h3>
            <div class="com_list">
                <div class="com_item" v-for="(item,i) in hotComments" :key="i">
                    <div class="ci_head">
                        <a class="userphoto">
                            <img :src="item.user.avatarUrl" alt="">
                        </a>
                    </div>
                    <div class="ci_wrap">
                        <div class="ci_title">
                            <div class="ci_meta">
                                <span class="user_name"><a class="nickname">{{item.user.nickname}}</a></span>
                                <div class="ci_time">{{formatDate(item.time)}}</div>
                            </div>
                            <div class="ci_like">
                                <span class="ci_likearea">
                                    <span class="ci_count">{{item.likedCount}}</span>
                                    <i class="iconfont icon-zan"></i>
                                </span>
                            </div>
                        </div>
                        <div class="ci_content">{{item.content}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 最新评论列表 -->
        <div class="hotCom">
            <h3 class="listTitle">最新评论（{{ctotal}}）</h3>
            <div class="com_list">
                <div class="com_item" v-for="(item,i) in comments" :key="i">
                    <div class="ci_head">
                        <a class="userphoto">
                            <img :src="item.user.avatarUrl" alt="">
                        </a>
                    </div>
                    <div class="ci_wrap">
                        <div class="ci_title">
                            <div class="ci_meta">
                                <span class="user_name"><a class="nickname">{{item.user.nickname}}</a></span>
                                <div class="ci_time">{{formatDate(item.time)}}</div>
                            </div>
                            <div class="ci_like">
                                <span class="ci_likearea">
                                    <span class="ci_count">{{item.likedCount}}</span>
                                    <i class="iconfont icon-zan"></i>
                                </span>
                            </div>
                        </div>
                        <div class="ci_content">{{item.content}}</div>
                    </div>
                </div>
            </div>
            <div class="getallcom" @click="getallcom()">
                查看全部{{ctotal}}条评论 <i class="iconfont icon-arrow-right"></i>
            </div>
        </div>
        <!-- 收藏歌单 -->
        <div class="takePl">
            <div class="takeBtn" @click="subscribe()">
                <span class="btntake">收藏歌单</span>
            </div>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: "playlist",
        data(){
            return{
                playlist:{},
                uid:0,
                uPic:"",
                uName:"",
                icondown:true,
                playlistSongs:[],
                hotComments:[],
                comments:[],
                ctotal:0,
                allSong:[],
            };
        },
        mounted(){
            let listid = this.$route.query.id;
            this.axios.get("playlist/detail?id="+ listid+"&timestamp=222").then(
                (res)=>{
                    this.playlist = res.data.playlist;
                    this.uid = res.data.playlist.userId;
                    this.playlistSongs = res.data.playlist.tracks;
                    this.allSong = res.data.playlist.trackIds;
                    this.axios.get("user/detail?uid="+ this.uid+"&timestamp=222").then(
                        (res)=>{
                            console.log("用户信息",res.data.profile);
                            this.uPic = res.data.profile.avatarUrl;
                            this.uName = res.data.profile.nickname;
                        }
                    );
                }
            );
            this.axios.get("comment/playlist?id=" + listid+"&timestamp=222").then(
                (res)=>{
                    this.ctotal = res.data.total;
                    this.hotComments = res.data.hotComments;
                    this.comments = res.data.comments;
                    console.log("热门评论",this.hotComments);
                    console.log("评论",this.comments);
                }
            )

        },
        methods:{
            playCounts(num){
                var num1 = ((Math.ceil(num/1000))/10);
                if(Math.floor(num1 / 10) == 0){
                    return Math.floor(num);
                }
                else {
                    return num1 + "万"
                }
            },
            showInfo(){
                this.icondown = !this.icondown;
            },
            formatDate(time){
                // 格式化时间
                var d = new Date(time);
                var year = d.getFullYear();
                var month = d.getMonth()+1;
                var day = d.getDate();

                var myDate = new Date();
                var myYear = myDate.getFullYear();
                var mymonth = myDate.getMonth()+1;
                var myday = myDate.getDate();

                if(myYear == year && mymonth == month && myday == day){
                    return this.formatTime(d);
                }else{
                    return year + "年" + month + "月" + day + "日";
                }
            },
            formatTime(d){
                var hour = d.getHours();
                var min = d.getMinutes();
                if(hour < 10){
                    hour = "0" + hour;
                }
                if(min < 10){
                    min = "0" + min;
                }
                return hour + ":" + min;
            },
            subscribe(){
                this.axios.get("playlist/subscribe?t=1&id="+ this.$route.query.id +"&timestamp=22").then(
                    (res)=>{
                        console.log(res);
                        console.log("收藏成功");
                    }
                );
            },
            getallcom(){
                console.log("还没获取全部评论功能");
            },
        },
    }
</script>

<style scoped lang="scss">
    .playlist{
        background-color: #f8f8f8;
        .mint-button{
            left: 0;
        }
        /* 头部 */
        .list_header{
            position: relative;
            padding: 30px 10px 30px 15px;
            overflow: hidden;
            .lheader_bg{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 50%;
                filter: blur(20px);
                transform: scale(1.5);
            }
            .lheader_bg:after{
                content: "";
                background-color: rgba(0,0,0,0.25);
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: 1;
            }
            .lheader_info{
                position: relative;
                z-index: 2;
                .header_fl{
                    background-color: #e2e2e3;
                    position: relative;
                    width: 114px;
                    height: 114px;
                    float: left;
                    img{
                        width: 100%;
                        vertical-align: middle;
                    }
                    span{
                        position: absolute;
                        right: 2px;
                        top: 0;
                        z-index: 3;
                        padding-left: 15px;
                        color: #fff;
                        font-size: 12px;
                        text-shadow: 1px 0 0 rgba(0,0,0,.15);
                    }
                }
                .header_fr{
                    width: 59%;
                    text-align: left;
                    position: relative;
                    float: left;
                    margin-left: 16px;
                    h2{
                        padding-top: 1px;
                        font-size: 17px;
                        line-height: 1.3;
                        color: #fefefe;
                        height: 44px;
                        display: -webkit-box;
                        -webkit-box-pack: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        word-wrap: break-word;
                        word-break: break-all;
                        white-space: normal;
                        font-weight: 400;
                    }
                    .header_user{
                        position: relative;
                        margin-top: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: normal;
                        a{
                            font-size: 14px;
                            display: inline-block;
                            color: hsla(0,0%,100%,.7);
                            .header_user_pic{
                                display: inline-block;
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                vertical-align: middle;
                                margin-right: 5px;
                                position: relative;
                                img{
                                    width: 100%;
                                    vertical-align: middle;
                                    border-radius: 50%;
                                }
                            }
                        }
                    }
                }
            }
        }
        /* 中部描述*/
        .list_dec{
            position: relative;
            margin: 0 10px 0 15px;
            padding-top: 10px;
            line-height: 19px;
            color: #666;
            .dec_tag{
                font-size: 15px;
                text-align: left;
                margin-bottom: 10px;
                line-height: 20px;
                margin-right: -10px;
                span{
                    display: inline-block;
                    margin-right: 10px;
                    padding: 1px 8px;
                    font-size: 12px;
                    border: 1px solid rgba(0,0,0,0.1);
                    border-radius: 25px;
                }
            }
            .dec_info{
                text-align: left;
                font-size: 14px;
                position: relative;
                padding-bottom: 18px;
                line-height: 19px;
                color: #666;
                .dec_con{
                    word-wrap: break-word;
                    word-break: break-all;
                    white-space: normal;
                }
            }
            // vue蓝景的脚手架打包的时候会出现问题
            // 会吃掉下面的  -webkit-box-orient: vertical; 样式 要在打包后手动添加上面  原因不明
            .dec_info_thide3{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                line-clamp: 3;
            }
            .iconshow{
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
        /* 歌曲列表*/
        .listTitle{
            text-align: left;
            height: 23px;
            line-height: 23px;
            padding: 0 10px;
            font-size: 12px;
            color: #666;
            background-color: #eeeff0;
        }
        .list_songs{
            .rankUl{
                padding-top: 10px;
                .rankLi{
                    position: relative;
                    text-align: left;
                    div{
                        text-align: left;
                        display: inline-block;
                        font-size: 17px;
                    }
                    .song_index{
                        text-align: center;
                        vertical-align: middle;
                        width: 10%;
                        color: #999;
                        line-height: 34px;
                        transform: translateY(-20px);
                    }
                    .indexRed{
                        color: #df3436;
                    }
                    .songs{
                        width: 88%;
                        border-bottom: 1px solid #e7e7e7;
                        .song_name{
                            width: 80%;
                            color: #000;
                            display: block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-break: normal;
                        }
                        .song_dec{
                            display: block;
                            width: 80%;
                            font-size: 12px;
                            color: #888;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-break: normal;
                            padding: 3px 0;
                        }
                        .song_playBtn{
                            color: #888;
                            position: absolute;
                            top: 1vw;
                            right: 5vw;
                            i{
                                font-size: 26px;
                            }
                        }
                    }

                }
            }
        }
        .com_list{
            .com_item{
                padding-top: 10px;
                width: 100%;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                flex-direction: row;
                .ci_head{
                    height: 35px;
                    margin: 0 10px;
                    -webkit-box-flex: 0;
                    flex: none;
                    .userphoto{
                        position: relative;
                        display: block;
                        color: #507daf;
                        text-decoration: none;
                        cursor: pointer;
                        img{
                            display: block;
                            border-radius: 50%;
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
                .ci_wrap{
                    padding: 0 10px 11px 0;
                    -webkit-box-flex: 1;
                    -moz-box-flex: 1;
                    -ms-box-flex: 1;
                    box-flex: 1;
                    flex: auto;
                    width: 0;
                    position: relative;
                    border-bottom: 1px solid rgba(0,0,0,0.1);
                    .ci_title{
                        display: flex;
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                        flex-direction: row;
                        .ci_meta{
                            text-align: left;
                            -webkit-box-flex: 1;
                            flex: auto;
                            width: 0;
                            font-size: 0;
                            .user_name{
                                width: 100%;
                                display: inline-block;
                                .nickname{
                                    font-size: 14px;
                                    color: #666;
                                    line-height: 28px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    flex: auto;
                                    -webkit-box-flex: 1;
                                }
                            }
                            .ci_time{
                                font-size: 12px;
                                color: #999;
                            }
                        }
                        .ci_like{
                            width: 65px;
                            height: 22px;
                            line-height: 22px;
                            font-size: 12px;
                            color: #999;
                            flex: none;
                            -webkit-box-flex: 0;
                            text-align: right;
                            .ci_likearea{
                                display: inline-block;
                                min-width: 30px;
                                padding-left: 5px;
                                vertical-align: middle;
                                .ci_count{
                                    vertical-align: sub;
                                }
                                i{
                                    display: inline-block;
                                    width: 14px;
                                    height: 14px;
                                    line-height: 0;
                                    vertical-align: sub;
                                    cursor: pointer;
                                    font-size: 18px;
                                }
                            }
                        }
                    }
                    .ci_content{
                        text-align: left;
                        color: #333;
                        font-size: 15px;
                        line-height: 22px;
                        margin-top: 5px;
                        vertical-align: middle;
                    }
                }
            }
        }
        .getallcom{
            margin: 0 auto 30vw auto;
            position: relative;
            padding: 18px 0;
            font-size: 14px;
            color: #999;
            text-align: center;
            line-height: 1;

        }

        .takePl{
            width: 100%;
            position: fixed;
            background-color: #fff;
            bottom: 0;
            .takeBtn{
                padding: 7px 30px;
                display: flex;
                margin: 0 auto;
                .btntake{
                    margin-left: 0;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    flex: 1 1 auto;
                    width: 1%;
                    border-radius: 36px;
                    color: #fff;
                    background-color: #d33a31;
                    display: block;
                    padding: 0 6px;
                    border: 1px solid #d33a31;
                    text-align: center;
                    box-sizing: border-box;
                }
            }
        }
    }


 @media screen and (min-width: 360px){
     .playlist .list_header .lheader_info .header_fl{
         width: 126px;
         height: 126px;
     }
 }
</style>